<template>
  <div>
    <el-table
      size="mini"
      header-cell-class-name="table-header-gray"
      ref="tableImpl"
      :data="list"
    >
      <el-table-column
        label="序号"
        header-align="center"
        align="center"
        type="index"
        width="55px"
        :index="getTableIndex"
      />
      <el-table-column label="请假用户" prop="userShowName" />
      <el-table-column label="请假类型" prop="leaveTypeDictMap">
        <template slot-scope="{ row }">
          {{ row.masterData.leaveTypeDictMap.name }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="leaveBeginTime">
        <template slot-scope="{ row }">
          {{ row.masterData.leaveBeginTime }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="leaveEndTime">
        <template slot-scope="{ row }">
          {{ row.masterData.leaveEndTime }}
        </template>
      </el-table-column>
      <el-table-column label="流程创建时间" width="180px" prop="createTime" />
      <el-table-column label="流程状态" width="100px" prop="flowStatus">
        <template slot-scope="{ row }">
          {{ row.flowStatus | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click.stop="handleClickDetail(scope.row)"
          >
            详情
          </el-button>
          <el-button
            type="text"
            size="mini"
            class="table-btn error"
            @click.stop="handleClickCancle(scope.row)"
          >
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { Leave } from '@/api/approve.js';

export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    queryParams: {
      default: () => {
        return {}
      }
    }
  },
  filters: {
    statusFilter (status) {
      const data = {
        0: '已提交',
        1: '审批中',
        2: '已拒绝',
        3: '已完成',
        4: '终止',
        5: '撤销'
      }
      return data[status]
    }
  },
  methods: {
    // 页面序号
    getTableIndex (index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
    },
    handleClickDetail (row) {
      this.$router.push({
        path: '/Leave/Detail',
        query: {
          id: row.processInstanceId,
          processDefinitionId: row.processDefinitionId,
          processInstanceId: row.processInstanceId
        }
      })
      // this.$emit('handleDetail', row)
    },
    handleClickCancle (row) {
      this.$confirm('是否撤销此工单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Leave.cancle(this, {
          cancelReason: '主动撤销',
          workOrderId: row.workOrderId
        }).then(res => {
          this.$message({
            type: 'success',
            message: '已撤销!'
          });
          this.getList()
        })
      }).catch(() => { });
    },
    // 列表
    getList () {
      Leave.list(this, {
        pageParam: {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        },
        flowWorkOrderDtoFilter: {
          flowStatus: this.queryParams.flowStatus,
          createTimeStart: this.queryParams.time && this.queryParams.time[0],
          createTimeEnd: this.queryParams.time && this.queryParams.time[1]
        },
        orderParam: [
          {
            fieldName: 'createTime',
            asc: false
          }
        ]
      }).then((res) => {
        this.list = res.data.dataList;
        this.total = res.data.totalCount;
      });
    }
  }
};
</script>
